<template>
  <div class="page-container">
    <div class="toolbar">
      <el-row>
        <el-tabs type="border-card">
          <el-tab-pane label="单据信息">
            <el-form
              :inline="true"
              :model="operateDataForm"
              label-width="110px"
              style="text-align:left;"
              ref="operateDataForm"
              :rules="operateDataFormRules"
              class="form"
            >
              <el-row style="margin-top: 30px;">
                <!-- <el-divider content-position="center">
                  <span style="font-size:16px;font-weight:800"></span>
                </el-divider> -->

                <el-form-item label v-show="false">
                  <el-input v-model="operateDataForm.storeId" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="原仓库：" prop="storeId">
                  <el-select
                    v-model="operateDataForm.storeId"
                    @change="selectMerchant"
                    :disabled="operateDataForm.id!=0&&operateDataForm.id!=null"
                  >
                    <el-option
                      v-for="item in storeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="调拨仓库：" prop="operateId">
                  <el-select
                    v-model="operateDataForm.storeId"
                    @change="selectMerchant"
                    :disabled="operateDataForm.id!=0&&operateDataForm.id!=null"
                  >
                    <el-option
                      v-for="item in storeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="单据编号：">
                  <el-input v-model="operateDataForm.code" placeholder="请输入" :disabled="!flag"></el-input>
                </el-form-item>
                <el-form-item label="批次：">
                  <el-input v-model="operateDataForm.batchNo" placeholder="请输入" :disabled="!flag"></el-input>
                </el-form-item>
                <el-form-item label="备注：">
                  <el-input v-model="operateDataForm.remark" placeholder="请输入" :disabled="!flag"></el-input>
                </el-form-item>
              </el-row>
            </el-form>
          </el-tab-pane>

        </el-tabs>
      </el-row>
      <el-row>
        <el-tabs type="border-card">
          <div class="tool-wrap">
            <el-row class="search-button mt5">
               <div v-if="flag">
              <el-button-group>
                <el-button type="primary" size="small" @click="addProduct">新增</el-button>
                <el-button type="primary" size="small" @click="deleteProduct">删除</el-button>
                <el-button
                  type="primary"
                  icon="el-icon-upload2"
                  class="el-button el-button--primary el-button--small"
                  @click="importProduct"
                >导入</el-button>
                <el-button
                  type="primary"
                  icon="el-icon-download"
                  class="el-button el-button--primary el-button--small"
                  @click="download"
                >下载导入模板</el-button>
              </el-button-group>
            </div>
            </el-row>
          </div>
          <el-tab-pane label="  商品信息">
            <el-table
              :data="tableData"
              height="250"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="productCode" label="商品编码" width="180"></el-table-column>
              <el-table-column prop="chineseName" label="商品名称" width="180"></el-table-column>
              <el-table-column prop="artNo" label="货号"></el-table-column>
              <el-table-column prop="barCode" label="商品条码"></el-table-column>
              <el-table-column prop="unitName" label="主计量单位"></el-table-column>
              <el-table-column prop="applyNum" label="调拨数量">
                <template slot-scope="scope">
                  <div>
                    <el-input
                      size="small"
                      v-model="scope.row.applyNum"
                      placeholder="请输入申请数量"
                      :disabled="!flag"
                    ></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="actualNum" label="实际处理数量">
                <template slot-scope="scope">
                  <div>
                    <el-input
                      size="small"
                      v-model="scope.row.actualNum"
                      placeholder="实际处理数量"
                      :disabled="!flag"
                    ></el-input>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <div class="tool-wrap" v-if="flag">
            <div>
              <el-button-group>
                <el-button type="primary" size="small" @click="saveProduct()">保存</el-button>
                <el-button type="primary" size="small" @click="deleteProduct">出库</el-button>
                <el-button type="primary" size="small" @click="back()">返回</el-button>
              </el-button-group>
            </div>
          </div>
          <div class="tool-wrap" v-if="!flag">
            <div>
              <el-button-group>
                <el-button type="primary" size="small" @click="back()">返回</el-button>
              </el-button-group>
            </div>
          </div>
        </el-tabs>
      </el-row>

      <!--新增商品弹窗-->
      <el-dialog title="选择商品" :visible.sync="dialogTableVisible">
        <div class="search-wrap">
          <el-form
            :inline="true"
            :model="searchFilters"
            ref="searchFilters"
            label-position="right"
            label-width="200px"
          >
            <el-form-item label="商品">
              <el-col :span="12">
                <el-input v-model="searchFilters.chineseName" placeholder="请输入商品名称/编码/货号/条码"></el-input>
              </el-col>
              <el-col :span="12">
                <el-button @click="queryProduct">查询</el-button>
              </el-col>
            </el-form-item>
          </el-form>
        </div>

        <div class="table-wrap">
          <jic-table
            :height="350"
            :operationWidth="200"
            :tableList="products"
            :showDeleteOperation="true"
            :tableHeaderList="tableHeaderList"
            :totalSize="totalSize"
            :showDetailOperation="true"
            :showBatchDelete="false"
            :showOperation="false"
            :showSelection="true"
            :showIndex="false"
            @findPage="queryProduct"
            @handleSizeChange="handleSizeChange"
            @handlePageChange="handlePageChange"
            @selectionChange="selectionChange"
            ref="jicTable"
          ></jic-table>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addOperateProduct">保 存</el-button>
          <el-button type="primary" @click="dialogTableVisible = false">取 消</el-button>
        </div>
      </el-dialog>

      <!--批量修改库存-->
      <el-dialog
        title="批量导入库内事物单"
        width="30%"
        height="30%"
        :visible.sync="showAddDialog"
        :close-on-click-modal="false"
        center
      >
        <el-upload
          class="upload-demo"
          action
          :on-change="handleChange"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          :limit="limitUpload"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          :auto-upload="false"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-dialog>
    </div>
  </div>
</template>
<script>

import jicTable from "@/components/jicComponentGallery/jicTable";
import { mapState } from "vuex";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import VDistpicker from "v-distpicker";
import elTree from "@/views/tree/src/tree.vue";
import { param } from "../../../utils";
import KtButton from "@/views/Core/KtButton";

export default {

  components: {
    jicTable,
    ThemePicker,
    LangSelector,
    VDistpicker,
    elTree
  },

  //2.2 数据初始化区
  data() {
    return {
      flag: true, //默认新增 操作按钮显示
      multipleSelection: [], //多选删除商品数据
      limitUpload: 1,
      fileTemp: null,
      file: null,
      da: [],
      dalen: 0,
      showAddDialog: false, //文件上传默认隐藏
      fileList: [], //文件列表
      pageRequest: { pageNum: 1, pageSize: 10 }, // 请求数据的参数
      selections: [], //勾选的商品信息
      tableHeaderList: [
        {
          prop: "chineseName",
          label: "商品名称",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "productCode",
          label: "商品编码",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "artNo",
          label: "货号",
          minWidth: 100,
          formatter: this.fomatterype
        },
        {
          prop: "barCode",
          label: "商品条码",
          minWidth: 100,
          formatter: this.formatterStatus
        },
        { prop: "unitName", label: "计量单位", minWidth: 100, formatter: null }
      ], // 2.2.3 搜索表单对应的数据对象初始化
      totalSize: 1,
      currentPage: 5,
      searchFilters: {}, //搜索商品条件
      formLabelWidth: "120px",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      products: [],
      dialogTableVisible: false,
      flag: false, //默认是修改页面
      selectedOptionsData1: [], //商家数据下拉框
      storeList: [],
      operates: [], //单据类型数据
      id: this.$route.params.id,
      tableData: [],
      operateDataForm: { storeId: null, id: null }, //表头基础信息表单

      // 2.2.2 form 表单数据初始化
      dataForm: {
        id: null,
        code: null,
        product_id: null,
        order_id: null,
        balance_id: null,
        operate_id: null,
        operate_desc: null,
        apply_num: null,
        actual_num: null,
        calculate_type: null,
        create_time: null,
        update_time: null,
        creator: null,
        updater: null,
        delete_flag: null,
        status: null,
        batch_no: null,
        remark: null,
        type: null
      },
      operateDataFormRules: {
        storeId: [{ required: true, message: "请选择仓库", trigger: "change" }],
        operateId: [
          { required: true, message: "请选择单据类型", trigger: "change" }
        ]
      },
      dataFormRules: {
        id: [
          { required: true, message: "请输入", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        code: [
          { required: true, message: "请输入单据编号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        product_id: [
          { required: true, message: "请输入关联商品Id", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        order_id: [
          { required: true, message: "请输入订单编号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        balance_id: [
          { required: true, message: "请输入操作的台账Id", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        operate_id: [
          { required: true, message: "请输入操作编码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        operate_desc: [
          { required: true, message: "请输入操作描述", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        apply_num: [
          { required: true, message: "请输入申请增减的数量;", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        actual_num: [
          { required: true, message: "请输入实际增减的数量", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        calculate_type: [
          {
            required: true,
            message: "请输入操作类型(正号为加,负号为减;)",
            trigger: "blur"
          },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        create_time: [
          { required: true, message: "请输入创建时间", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        update_time: [
          { required: true, message: "请输入修改时间", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        creator: [
          { required: true, message: "请输入创建人", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        updater: [
          { required: true, message: "请输入修改人", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        delete_flag: [
          { required: true, message: "请输入删除标志", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        status: [
          {
            required: true,
            message: "请输入状态(0-待处理;1-已完成)",
            trigger: "blur"
          },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        batch_no: [
          { required: true, message: "请输入批次号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        remark: [
          { required: true, message: "请输入备注", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ],
        type: [
          {
            required: true,
            message: "请输入台账类别;1-表示实体仓台账;2-表示虚拟仓台账;",
            trigger: "blur"
          },
          { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }
        ]
      }
    };
  },

  methods: {

    getDetail() {
      let this_ = this;
      this.utils.request.queryMerchantListOther({}, function(res) {
        if (res.code == "0000") {
          this_.selectedOptionsData1 = res.data;
        }
      });
      if (
        this.$route.params != null &&
        this.$route.params.id != null &&
        this.$route.params.id != "" &&
        this.$route.params.id != "undefined" &&
        this.$route.params.id != 0
      ) {
        this.flag = false; //操作按钮隐藏
        if (this.$route.params.type == 1) {
          this.flag = true;
        }
        let params = {};
        params.id = this.$route.params.id;
        this.utils.request.getMStoreOperateDetail(params, function(res) {
          if (res.code === "0000") {
            this_.operateDataForm = res.data;
          } else {
            this_.$message({ message: "操作失败, " + data.msg, type: "error" });
          }
        });
        //加载详细记录列表
        this.utils.request.getMStoreOperateProductsDetail(
          { operateId: this.$route.params.id },
          function(res) {
            if (res.code === "0000") {
              this_.tableData = res.data;
            } else {
              this_.$message({
                message: "操作失败, " + data.msg,
                type: "error"
              });
            }
          }
        );
      } else {
        this.flag = true;
        this.getdae();
        //加载商家数据
        let this_ = this;
        this.utils.request.queryMerchantListOther({}, function(res) {
          if (res.code == "0000") {
            this_.selectedOptionsData1 = res.data;
          }
        });
      }
    },

    submitForm: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            this.utils.request.saveMStoreOperate(params, this.editInfoBack);
            this.$router.go(-1);
          });
        }
      });
    },
    // 7.页面弹窗处理方法
    add() {
      this.dialogVisible = true;
    },

    //返回上一页;
    back() {
      this.$router.push("../Pages/Store/MStoreVirtualList");
    },

    // 8.关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },

    /*图片预览*/
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /*图片移除*/
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    getdae() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? 0 + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? 0 + new Date().getSeconds()
          : new Date().getSeconds();
    },
    getStore() {
      let this_ = this;
      this.utils.request.getMStoreList({}, function(res) {
        if (res.code === "0000") {
          this_.storeList = res.data;
        } else {
          this_.$message({ message: "操作失败, " + data.msg, type: "error" });
        }
      });
    },
    getOperate() {
      let this_ = this;
      this.utils.request.getOperateList({}, function(res) {
        if (res.code === "0000") {
          this_.operates = res.data;
        } else {
          this_.$message({ message: "操作失败, " + data.msg, type: "error" });
        }
      });
    },
    addProduct() {
      let this_ = this;
      //判断是否保存单据
      // if (
      //   this.operateDataForm.id == null ||
      //   this.operateDataForm.id == undefined ||
      //   this.operateDataForm.id == 0
      // ) {
      //   this.$message({
      //     message: "请先保存表头！",
      //     type: "warning"
      //   });
      //   // return
      // }
      this.dialogTableVisible = true;
      //初始化加载商品信息
      this.queryProduct();
    },
    queryProduct() {
      let this_ = this;
      if (this_.searchFilters === undefined || this_.searchFilters === null) {
        this_.searchFilters = {};
      }
      this.utils.request.queryWarehouseProductRelation(
        this_.searchFilters,
        function(res) {
          console.log(res);
          this_.products = res.data.rows;
          this_.totalSize = Number(res.data.total);
        }
      );
    },
    deleteProduct() {
      this.multipleSelection.forEach(com => {
        this.tableData.forEach((item, index, origin) => {
          if (
            item.chineseName == com.chineseName &&
            item.productCode == com.productCode
          ) {
            this.tableData.splice(index, 1);
          }
        });
      });
    },
    importProduct() {
      // this.fileList = [];
      this.showAddDialog = true;
    },
    selectMerchant(id) {
      //根据选择仓库id加载对应的商家
      console.log(id);
    },
    //保存表头
    addOperate() {
      let this_ = this;
      this.$refs.operateDataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            let params = Object.assign({}, this.operateDataForm);
            this.utils.request.saveOrUpdateMStoreOperate(params, function(res) {
              if (res.data != "0") {
                this_.$message({
                  message: "保存单据信息成功",
                  type: "success"
                });
                this_.operateDataForm.id = res.data;
              }
            });
          });
        }
      });
    },
    editInfoBack() {
      //跟新当前页面operate表头信息
      this.getDetail();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 选中列表中的选项触发
    selectionChange(selections) {
      this.selections = selections.selections;
    },
    handlePageChange(params) {
      this.pageRequest.pageNum = params.number;
      this.findPage();
    },
    addOperateProduct() {
      let this_ = this;
      this_.dialogTableVisible = false;
      //把选中的数据加入到商品信息列表中
      if (this_.tableData.length == 0) {
        for (let i = 0; i < this_.selections.length; i++) {
          this_.selections[i].id = null;
          this_.tableData.push(this_.selections[i]);
        }
      } else {
        this_.selections.forEach(function(item1, index) {
          let obj = this_.tableData.find(item2 => {
            return item2.productCode == item1.productCode;
          });
          if (!obj) {
            item1.id = null;
            this_.tableData.push(item1);
          }
        });
      }
    },
    saveProduct() {
      // if (this.tableData.length == 0) {
      //   return;
      // }
      //保存记录
      // let MStoreOperateProductInfos = Object.assign({}, this.tableData);
      // let params = {
      //   infos: MStoreOperateProductInfos,
      //   storeId: this.operateDataForm.id,
      //   operateId:this.operateDataForm.operateId
      // };
      // this.utils.request.saveMStoreOperateProducts(params, function(res) {
      //   if (res.data != "0") {
      //     this_.$message({
      //       message: "保存成功",
      //       type: "success"
      //     });
      //     // this_.operateDataForm.id = res.data;
      //   }
      // });
      // console.log(this.tableData);

      //校验必填参数
      let this_ = this;
      this.$refs["operateDataForm"].validate(valid => {
        if (valid) {
          //更新operate主体信息
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            let params = Object.assign({}, this.operateDataForm);
            console.log(params);
            this.utils.request.saveOrUpdateMStoreOperate(params, function(res) {
              if (res.data != "0") {
                // this_.$message({
                //   message: "保存单据信息成功",
                //   type: "success"
                // });
                this_.operateDataForm.id = res.data;
                //保存商品列表

                for (let i = 0; i < this_.tableData.length; i++) {
                  //判断申请数量
                  if (
                    this_.tableData[i].applyNum == "" ||
                    this_.tableData[i].applyNum == undefined
                  ) {
                    this_.$message({
                      message: "第 " + i + 1 + " 行商品信息申请数量不能为空",
                      type: "error"
                    });
                    return;
                  } else {
                    let params = this_.tableData[i];
                    params.operateFlag = this_.operateDataForm.operateId; //进出库操作
                    params.parentId = this_.operateDataForm.id; //详情单对应的m_store_operate id
                    params.storeId = this_.operateDataForm.storeId; //仓库id
                    this_.utils.request.saveMStoreOperateProduct(
                      params,
                      function(res) {
                        this_.$message({
                          message: "保存成功",
                          type: "success"
                        });
                      }
                    );
                  }
                }
              }
            });
          });
        }
      });
    },
    uploadExcel() {
      return "http://localhost:8087/jic-product/mStoreOperate/mStoreOperateDetailExcel";
    },
    //导入之后方法
    handleSuccess: function(res) {
      if (res.code == "0000") {
        this.$message({ message: res.data, type: "success" });
        this.showAddDialog = false;
      } else {
        this.$message({ message: "操作失败, " + res.msg, type: "error" });
      }
    },
    //上传之前校验格式
    beforeUpload(file) {
      // //.xls,.xlsx
      // const isJPG =
      //   file.type === 'application/vnd.ms-excel' ||
      //   file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      // if (!isJPG) {
      //   this.$message.error('上传文件只能是.xls,.xlsx格式!')
      //   return isJPG
      // }
    },

    //提交模板
    submitUpload() {
      this.$refs.upload.submit();
    },
    //上传文件时处理方法
    handleChange(file, fileList) {
      this.fileTemp = file.raw;
      if (this.fileTemp) {
        if (
          this.fileTemp.type ==
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
          this.fileTemp.type == "application/vnd.ms-excel"
        ) {
          this.importfxx(this.fileTemp);
        } else {
          this.$message({
            type: "warning",
            message: "附件格式错误，请删除后重新上传！"
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请上传附件！"
        });
      }
    },
    //超出最大上传文件数量时的处理方法
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！"
      });
      return;
    },
    //移除文件的操作方法
    handleRemove(file, fileList) {
      this.fileTemp = null;
    },
    importfxx(obj) {
      let _this = this;
      let inputDOM = this.$refs.inputer;
      // 通过DOM取文件数据

      this.file = event.currentTarget.files[0];

      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;

      var reader = new FileReader();
      //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function(e) {
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          var XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64"
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary"
            });
          }
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
          // console.log('未处理的原始数据如下：');
          // console.log(outdata);
          //此处可对数据进行处理
          let arr = [];
          outdata.map(v => {
            let obj = {};
            obj.chineseName = v["商品名称"];
            obj.productCode = v["商品编码"];
            obj.actualNum = v["实际处理数量"];
            obj.applyNum = v["申请数量"];
            //加入到列表中
            //开始校验逻辑
            /**
             *  商品必须是商家下的仓库中的商品

                商品编码、商品名称：必须正确，否则不允许导入

                申请数量、实际处理数量：验证为正整数，否则不允许导入

                如果只是某一行出现问题提示“第*行的商品编码+商品名称不存在当前仓库中”，

                “第*行的申请数量输入错误”，“第*行的实际处理数量输入错误”，只要有一行有问题则不允许导入。

                商品货号和条码、主计量单位，需要根据商品编码+名称从数据库中查询出来。

                 如果表格中存在重复的商品编码+名称则提醒“存在重复数据”

                 如果在页面中有一个商品，但是导入的excel也有这个商品则直接覆盖。
             */
            _this.importRuleCheck(obj);
            _this.showAddDialog = false;
            _this.fileTemp = null;
          });
          _this.da = arr;

          _this.dalen = arr.length;
          return arr;
        };
        reader.readAsArrayBuffer(f);
      };
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },
    importRuleCheck(obj) {
      let arr = [];
      let this_ = this;
      this_.utils.request.importRuleCheck(obj, function(res) {
        if (res.code == "0000") {
          arr.push(res.data);
        } else {
          this_.$message({
            message: "校验不通过： " + res.msg,
            type: "error"
          });
          return;
        }
        //把数据加到列表中去
        for (let i = 0; i < arr.length; i++) {
          let res = this_.tableData.find(item => {
            return item.productCode == arr[i].productCode;
          });
          if (!res) {
            this_.tableData.push(arr[i]);
          }
        }
      });
    },
    //下载导入模板
    download() {
      var $form = $('<form method="GET"></form>');
      $form.attr("action", "/static/oPeratetemplete.xlsx");
      $form.appendTo($("body"));
      $form.submit();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }

    //==========2.3.1 JavaScript 自定义方法区==========
  },

  //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
  mounted() {
    this.getDetail();
    //加载仓库列表
    this.getStore();
    this.getOperate();
    //加载商家列表
  }
};
</script>
<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
.search-button{
  border: none;
}

.mt5{
  margin-top: 5px;
}
</style>
